<template>
  <div class='container'>
    <el-dialog title="预览文章" :visible="dialogVisible" @close="closeDialog" :close-on-click-modal="false" @open="openDia">
   <div class="title">
        <h2>{{ form.title }}</h2>
      </div>
       <div class="timeFn">
        <span>{{ formatTime(form.createTime) }}</span>
        <span>超级管理员</span>
        <i class="el-icon-view"></i>
        <span>{{ form.visits }}</span>
      </div>
        <div class="text">
        <span v-html="form.articleBody"></span>
        <img src="" class="image" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/articles.js'
import dayjs from 'dayjs'
export default {
  data () {
    return {
      form: {
        title: '',
        articleBody: '',
        videoURL: '',
        reads: '',
        state: '',
        creator: ''
      }
    }
  },
  props: {
    nodeId: {
      type: Number,
      default: 0
    },
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  // props: ['dialogVisible', 'nodeId'],
  methods: {
    closeDialog () {
      this.$emit('closeDialog')
    },
    async openDia () {
      const res = await detail({ id: this.nodeId })
      console.log(res)
      this.form = res.data
    },
    formatTime (val) {
      return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style scoped lang='scss'>

.el-dialog{
  padding: 0 20px;
}
.title{
  padding-bottom: 5px;
}
.timeFn{
  height: 25px;
}
.timeFn span {
  margin-left: 10px;
}

.timeFn i {
  margin-left: 10px;
}
.text{
  border-top: 1px dashed #ccc;
  padding: 10px;
  background: #f5f5f5;
}
</style>
